<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--favicon.ico  -->
  <link rel="icon" href="images/resume1.ico"  type="image/x-icon" />
  <link rel="shortcut icon" href="images/resume1.ico" type="image/x-icon" />
  <!-- icon -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_831452_v8sche5ig1.css">
  
  <title>王小勤 | 前端工程师</title>

  <!-- 移动端适配 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- 技术栈icon -->
  <link rel="stylesheet" href="https:////at.alicdn.com/t/font_833335_bej0jw9zg9.css">

 <!-- 外部css文件引入 -->
  <link rel="stylesheet" href="css/resume.css">

</head>

<body>

  <main>
    <div class="container">

      <!-- 个人信息 -->
      <li class="font-weight-light">
      <img src="images/xinxi.svg">
      <h3 class="font-weight-normal text-dark info">个人信息</h3>
      </li>
      <p class="text-primary font-weight-light info-en">Information</p>
   

      <div class="bar"></div>

      <h1 class="font-weight-normal text-dark name">王小勤</h1>
      <p class="text-primary desc">女，本科，25岁，前端工程师</p>
      
      <ul>
        <li class="font-weight-light">
          <img src="images/weixin.svg"> 
          wangxiaoqin393
        </li>

        <li class="font-weight-light">
          <img src="images/phone.svg">
          <a class="text-dark" href="tel:18320158956">18320158956</a>
        </li>

        <li class="font-weight-light">
            <img src="images/e-mail.svg">
            <a class="text-dark" href="mailto:wangxiaoqin.0009@163.com">wangxiaoqin.0009@163.com</a>
        </li>

       <!--  <li class="font-weight-light">
            <img src="images/yuanxiao.svg">
            <a class="text-dark">北航北海学院</a>
        </li> -->
      </ul>

    <!-- 作品 -->
    <li class="font-weight-light">
      <img src="images/zuopin.svg">
      <h3 class="font-weight-normal text-dark info">项目作品</h3>
    </li>
    <p class="text-primary font-weight-light works-en">Project&nbsp;Work</p>

    <div class="bar"></div>

    <div class="container works-wrapper">

    <!--作品1：vue作品：博客星球 -->
      <div class="row netease">
        <div class="col-12 col-md-6 bg bg-blog"></div>
        <div class="col-12 col-md-6 d-flex flex-column justify-content-center item-text">
          <p class="item-name text-primary">
            <i class="iconfont icon-project text-primary"></i>《博客星球》-
            <span class="font-weight-light font-italic">&nbsp;Blog&nbsp;Share</span>
          </p>

          <div class="item-link d-flex justify-content-around">           
            <a class="text-primary" href="https://github.com/wxq393/vue-shareblog-preview">
              <i class="font-weight-light"><img src="images/item.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>项目地址
            </a>
     
            <a class="text-primary" href=" https://wxq393.github.io/vue-shareblog-preview/">
              <i class="font-weight-light"><img src="images/link.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>预览链接
            </a>
          </div>

          <p class="item-intro text-primary">
            <i class="iconfont icon-description text-primary"></i>作品简介 -
            <span class="font-weight-light font-italic">Introduction</span>
          </p>

          <p class="item-desc">博客星球，一个可以提供给多人使用的博客平台，包含了首页、用户文章列表、登录、注册、个人管理、编辑、发布等功能。主要使用<code>Vue.js</code>技术栈，通过<code>Vue-cli</code>脚手架搭建生成项目模板，<code>vuex</code>对项目数据进行管理，分别用<code>Less</code>&nbsp;、&nbsp;<code>ElementUI</code>对页面样式引入和应用，使用<code>npm&nbsp;run&nbsp;build</code>进行编译打包</p>
          <p class="item-tech text-primary">
            <i class="iconfont icon-chilun text-primary"></i>技术栈&nbsp;-&nbsp;
            <span class="font-weight-light font-italic">Technology&nbsp;Stack</span>
          </p>

          <p class="item-icon">
            <img src="images/vue.svg">
            <img src="images/element-ui.svg">  
            <img src="images/npm.svg">  
            <img src="images/less.svg">
            <img src="images/api.svg">  
          </p>
        </div>

      </div>

      <!--作品2：小程序：个人翻译小助手 -->
    <div class="row vue">
      <div class="col-12 col-md-6 bg bg-fanyi"></div>
      <div class="col-12 col-md-6 d-flex flex-column justify-content-center item-text">

      <p class="item-name text-primary">
        <i class="iconfont icon-chilun text-primary"></i>《Miya翻译》-
        <span class="font-weight-light font-italic">&nbsp;Mini&nbsp;App</span>
      </p>
  
        <!-- 项目地址 -->
      <div class="item-link d-flex justify-content-around"> 
        <a class="text-primary" href="https://github.com/wxq393/miniapp-fanyitool">
        <i class="font-weight-light"><img src="images/item.svg"></i>  
        <i class="iconfont icon-link1 text-primary"></i>项目地址
        </a>
        <a class="text-primary" href="http://wx1.sinaimg.cn/mw690/0060lm7Tly1fvv2g86eo0j3076076gmo.jpg">
        <i class="font-weight-light"><img src="images/link.svg"></i>  
        <i class="iconfont icon-link1 text-primary"></i>预览链接
        </a>
      </div>

        <p class="item-intro text-primary">
          <i class="iconfont icon-chilun text-primary"></i>作品简介 - 
          <span class="font-weight-light font-italic">Introduction</span>
        </p>
        <p class="item-desc">
          Miya翻译，是一款提供给个人使用的语言翻译便捷小工具，现已发布上线。通过阅读小程序文档实现翻译和历史的功能，利用百度翻译<code>API</code>接口获取翻译资源实现多种语言互译，实现日常基本单词的翻译需求。
        </p>

        <p class="item-tech text-primary">
          <i class="iconfont icon-chilun text-primary"></i>技术栈&nbsp;-&nbsp;
          <span class="font-weight-light font-italic">Technology&nbsp;Stack</span>
        </p>
         <!-- 技术icon展示 -->
        <p class="item-icon">
          <img src="images/js.svg">
          <img src="images/mini-apps.svg"> 
          <img src="images/mobile.svg">  
          <img src="images/api.svg">
        </p>
      </div>

    </div>


      <!--作品3：移动端项目：豆瓣电影 -->
      <div class="row douban">
        <div class="col-12 col-md-6 bg bg-douban"></div>
        <div class="col-12 col-md-6 d-flex flex-column justify-content-center item-text">
          <p class="item-name text-primary">
            <i class="iconfont icon-project text-primary"></i>《Top250好看电影》-
            <span class="font-weight-light font-italic">&nbsp;Douban&nbsp;Movie&nbsp;Top250</span>
          </p>
          
          <div class="item-link d-flex justify-content-around">
            <a class="text-primary" href="https://github.com/wxq393/DouBan-Movie">
              <i class="font-weight-light"><img src="images/item.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>项目地址
            </a>
     
            <a class="text-primary" href="https://wxq393.github.io/DouBan-Movie/index.html">
              <i class="font-weight-light"><img src="images/link.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>预览链接
            </a>
          </div>

          <p class="item-intro text-primary">
            <i class="iconfont icon-description text-primary"></i>作品简介 -
            <span class="font-weight-light font-italic">Introduction</span>
          </p>
          <p class="item-desc">豆瓣电影TOP250，可用来查询豆瓣电影榜单上排名前250的电影。可以查看电影信息、北美电影以及搜索你喜欢的电影。利用豆瓣提供<code>API</code>接口获取排名前250的电影，主要使用<code>JQuery</code>和模块化思想实现底部tab跳转对应页面，<code>Jsonp</code>解决跨域问题。
          </p>
          
          <p class="item-tech text-primary">
            <i class="iconfont icon-chilun text-primary"></i>技术栈 -
            <span class="font-weight-light font-italic">Technology&nbsp;Stack</span>
          </p>
          <p class="item-icon">
              <img src="images/js.svg">  
              <img src="images/douban.svg">  
              <img src="images/mobile.svg">
              <img src="images/api.svg">
          </p>
        </div>
      </div>

       <!-- 作品4：react作品：待办事项 
      <div class="row netease">
        <div class="col-12 col-md-6 bg bg-daiban"></div>
        <div class="col-12 col-md-6 d-flex flex-column justify-content-center item-text">
          <p class="item-name text-primary">
            <i class="iconfont icon-project text-primary"></i>《懒惰救星》-
            <span class="font-weight-light font-italic">&nbsp;Todo&nbsp;items</span>
          </p>

          <div class="item-link d-flex justify-content-around">           
            <a class="text-primary" href="https://github.com/wxq393/Todolist">
              <i class="font-weight-light"><img src="images/item.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>项目地址
            </a>
     
            <a class="text-primary" href="https://wxq393.github.io/Todolist/build/index.html">
              <i class="font-weight-light"><img src="images/link.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>预览链接
            </a>
          </div>

          <p class="item-intro text-primary">
            <i class="iconfont icon-description text-primary"></i>作品简介 -
            <span class="font-weight-light font-italic">Introduction</span>
          </p>

          <p class="item-desc">待办事项，可以分条目记录你的待办事项，添加代办事项，删除完成事项。主要使用<code>Webpack</code>打包工具、<code>React</code>实现，<code>LeanCloud</code>作为第三方数据库实现数据同步更新</p>
          <p class="item-tech text-primary">
            <i class="iconfont icon-chilun text-primary"></i>技术栈&nbsp;-&nbsp;
            <span class="font-weight-light font-italic">Technology&nbsp;Stack</span>
          </p>

          <p class="item-icon">
            <img src="images/js.svg">
            <img src="images/mobile.svg">  
            <img src="images/webpack.svg">  
            <img src="images/react.svg">  
          </p>
        </div>

      </div>
 -->
      <!-- 作品5：原生JS+jquery：音乐播放器 
      <div class="row baby">
        <div class="col-12 col-md-6 bg bg-music"></div>
        <div class="col-12 col-md-6 d-flex flex-column justify-content-center item-text">
          <p class="item-name text-primary">
            <i class="iconfont icon-project text-primary"></i>《我的音乐盒》-
            <span class="font-weight-light font-italic">&nbsp;My&nbsp;music&nbsp;box</span>
          </p>
          
          <div class="item-link d-flex justify-content-around">
            <a class="text-primary" href="https://github.com/wxq393/playmusicbox">
              <i class="font-weight-light"><img src="images/item.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>项目地址
            </a>
     
            <a class="text-primary" href="https://wxq393.github.io/playmusicbox/play.html">
              <i class="font-weight-light"><img src="images/link.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>预览链接
            </a>
          </div>
          
          <p class="item-intro text-primary">
            <i class="iconfont icon-description text-primary"></i>作品简介 -
            <span class="font-weight-light font-italic">Introduction</span>
          </p>
          <p class="item-desc">我的音乐播放器，实现音乐播放器播放、暂停功能，上一首下一首切换功能，可拖动进度条和进度时间，播放新音乐同时切换背景图片。使用<code>HTML</code>、<code>CSS</code>，使用原生<code>JS</code>、<code>JQuery</code>，<code>DOM</code>操作、事件绑定操作、监听事件，利用音乐<code>API获取音乐资源</code>，<code>Ajax</code>使用（数据获取+处理）</p>
          

          <p class="item-tech text-primary">
            <i class="iconfont icon-chilun text-primary"></i>技术栈 -
            <span class="font-weight-light font-italic">Technology&nbsp;Stack</span>
          </p>
          <p class="item-icon">
              <img src="images/js.svg">
              <img src="images/jquery.svg">   
              <img src="images/music.svg">  
          </p>
        </div>
      </div>

      -->

     <!--作品6：css3使用：3D登录框
      <div class="row board">
        <div class="col-12 col-md-6 bg bg-login"></div>
        <div class="col-12 col-md-6 d-flex flex-column justify-content-center item-text">
          <p class="item-name text-primary">
            <i class="iconfont icon-project text-primary"></i>《用户注册登录》-
            <span class="font-weight-light font-italic">&nbsp;login&nbsp;&&nbsp;register</span>
          </p>

          <div class="item-link d-flex justify-content-around">
            <a class="text-primary" href="https://github.com/wxq393/login-register">
              <i class="font-weight-light"><img src="images/item.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>项目地址
            </a>
     
            <a class="text-primary" href="https://wxq393.github.io/login-register/login.html">
              <i class="font-weight-light"><img src="images/link.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>预览链接
            </a>
          </div>

          <p class="item-intro text-primary">
            <i class="iconfont icon-description text-primary"></i>作品简介 -
            <span class="font-weight-light font-italic">Introduction</span>
          </p>

          <p class="item-desc">你可以尝试地点击右上角的图标，跳转出一个可进行登录和注册的页面。主要使用<code>CSS3</code>实现一个登录注册的翻转效果</p>

          <p class="item-tech text-primary">
            <i class="iconfont icon-chilun text-primary"></i>技术栈 -
            <span class="font-weight-light font-italic">Technology&nbsp;Stack</span>
          </p>

          <p class="item-icon">
              <img src="images/login.svg">
              <img src="images/web.svg">  
          </p>
        </div>
      </div> 
    -->
      

  <!--  作品7：网站 ：主题网站
    <div class="row canvas">
          <div class="col-12 col-md-6 bg bg-web1"></div>
          <div class="col-12 col-md-6 d-flex flex-column justify-content-center item-text">
          <p class="item-name text-primary">
            <i class="iconfont icon-project text-primary"></i>《主题网站》-
            <span class="font-weight-light font-italic">&nbsp;X&nbsp;X&nbsp;X&nbsp;X</span>
          </p>

          <div class="item-link d-flex justify-content-around">
            <a class="text-primary" href="https://github.com/CaptainInPHW/vue-online-resume-editor">
              <i class="font-weight-light"><img src="images/item.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>项目地址
            </a>
     
            <a class="text-primary" href="http://captaininphw.xyz/vue-online-resume-editor/dist/index.html">
              <i class="font-weight-light"><img src="images/link.svg"></i>  
              <i class="iconfont icon-link1 text-primary"></i>预览链接
            </a>
          </div>

          <p class="item-intro text-primary">
            <i class="iconfont icon-description text-primary"></i>作品简介&nbsp;-&nbsp;
            <span class="font-weight-light font-italic">Introduction</span>
          </p>

          <p class="item-desc">主题网站，主要使用HTML+CSS实现
          </p>

          <p class="item-tech text-primary">
            <i class="iconfont icon-chilun text-primary"></i>技术栈&nbsp;-&nbsp;
            <span class="font-weight-light font-italic">Technology&nbsp;Stack</span>
          </p>

          <p class="item-icon">
             <img src="images/js.svg">
             <img src="images/mobile.svg">  
             <img src="images/webpack.svg">  
             <img src="images/react.svg">  
          </p>
        </div>
      </div> -->

    </div>

    <!-- 能力清单 -->
    <li class="font-weight-light">
    <img src="images/nengli.svg">
    <h4 class="font-weight-normal text-dark info">能力</h4>
    </li>
    <p class="text-primary font-weight-light tech-en">Technology&nbsp;Stack</p>

    <div class="bar"></div>

    <ul class="ability-item">
      <li>
        <div>
          有使用<code>HTML</code>+<code>CSS</code> ，以及<code>CSS3</code>的经验，掌握<code>CSS</code>常用布局，了解并掌握<code>SCSS/LESS</code>的几种简单语法。
        </div>
      </li>
      
      <li>
        <div>
          掌握并使用<code>JavaScript</code> ，对作用域链和闭包、<code>JS</code>异步操作、面向对象、原型和原型链，<code>this</code>等有一定的认识。基本了解<code>ES6</code>几种语法，如<code>let</code>、<code>const</code>、<code>class</code>和继承等，并能运用在实际项目中。
        </div>
      </li>
      
      <li>
        <div>
          了解<code>Vue.js</code>,以及生态周边<code>Vuex</code>、<code>VueRouter</code>。
        </div>
      </li>

      <li>
        <div>
          有使用<code>Ajax</code>使用经验，对前后端数据交互有一定认识；基本了解<code>nodejs</code>使用，对后端框架<code>Express</code>原理有一定了解，且通过<code>Express</code>对网页做基本的增删改查操作。了解前端性能优化手段，对<code>Webpack</code>和前端工程化<code>gulp</code>有一定了解，有项目使用经验。
        </div>
      </li>
      
      <li>
        <div>
          使用<code>Github</code>管理和跟踪项目，掌握<code>Git</code>常见命令，习惯使用图床、<code>LeanCloud</code>第三方数据库、<code>easy&nbsp;mock</code>数据、<code>API</code>接口等操作项目。
        </div>
      </li>
      
      <li>
        <div>
          学习新知识有阅读文档的习惯；有写博客文章的习惯，善于总结知识和技术使用经验；有自己的知乎专栏和博客。
        </div>
      </li>
    </ul>

    <!-- 个人链接输出 -->
    <li class="font-weight-light">
    <img src="images/zhuye.svg">
    <h4 class="font-weight-normal text-dark info">主页</h4>
    </li>
    <p class="text-primary font-weight-light other-en">Link&nbsp;&&nbsp;Blog</p>
    
    <div class="bar"></div>

    <ul class="link">
      <li class="font-weight-light">
        <img src="images/blog.svg"> 
        个人博客：&nbsp;<a href="https://wxq393.github.io/">https://wxq393.github.io/</a>
      </li>

       <li class="font-weight-light">
        <img src="images/zhihu.svg">
        知乎专栏：&nbsp;<a href="https://zhuanlan.zhihu.com/miya393">https://zhuanlan.zhihu.com/miya393</a>
      </li>

      <li class="font-weight-light"> 
        <img src="images/github.svg">
        Github：&nbsp;<a href="https://github.com/wxq393">https://github.com/wxq393</a>
      </li>
    </ul>

    </div>


    <!-- 自我介绍 -->
    <li class="font-weight-light">
    <img src="images/liaojie.svg">
    <h4 class="font-weight-normal text-dark info">了解我</h4>
    </li>

    <p class="text-primary font-weight-light intro-en">Personal&nbsp;Introduction</p>

    <div class="bar"></div>

    <p style="font-size: 14px;margin-top: 10px;">
      <ul class="intro-item">
        <li>热爱技术：喜欢前端技术，热衷探求技术本质；喜欢去感兴趣的技术会议，是珠三角技术沙龙的一名志愿者。</li>
        <li>善于总结：爱思考，善于总结，有自己解决问题的方式方法</li>
        <li>积极向上：狮子座，性格外向，善于与人交流，乐于帮助他人</li>
        <li>多元爱好：爱粤语歌、爱旅游、喜欢探寻新奇领域</li>
      </ul>
    </p>

    <!-- 个人履历 -->
    <li class="font-weight-light">
      <img src="images/jingli.svg">
      <h4 class="font-weight-normal text-dark info">履历</h4>
    </li>
    <p class="text-primary font-weight-light exp-en">Work&nbsp;Experience</p>
    <div class="bar"></div>

    <ul class="experience-item">
      <li>
        <div>
          <span style="font-weight: lighter;font-size: 14px;">2016.2-2017.2&nbsp;:&nbsp;</span>深圳静水流深信息有限公司 1年 运营数据分析 负责公司探货商城、有赞、众筹平台的商品上架、策划，运营数据分析工作。（偏运营数据分析方向，与编程完全无关的职位）
        </div>
      </li>

      <li>
        <div>
          <span style="font-weight: lighter;font-size: 14px;">2017.2-至今&nbsp;:&nbsp;</span>广州虎将网络科技有限公司 1年  前端助理工程师 参与公司外包项目的后台页面系统开发和测试工作
      </li>
    </ul>

    <!-- 工作项目 -->
    <!-- <h4 class="font-weight-normal text-dark projects">项目作品</h4>
    <p class="text-primary font-weight-light projects-en">Projects&nbsp;Show</p>
    <div class="bar"></div>
    <div style="margin: 20px 0 10px;font-weight: 500;">
      衣脉新零售商家管理后台&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span style="font-weight: lighter;font-size: 12px;">2018.04&nbsp;-&nbsp;2018.07</span>
    </div>
    <ul class="projects-item">
      <li>
        <div>
          <span style="color:#007bff">项目描述</span>：后台管理系统，以互联网为依托，为客户提供新零售试衣镜、储位设备等运行状况的监控功能，为客户对我们为其提供的一整套软、硬件操作提供了便利。</div>
      </li>
      <li>
        <div>
          <span style="color:#007bff">主要职责</span>：
          <ul class="duty">
            <li>
              <div>
                项目中使用了&nbsp;
                <code>Vue.js</code>&nbsp;技术，负责整个项目&nbsp;
                <code>VueRouter、Vuex</code>&nbsp;的配置，具备良好的可扩展性。
              </div>
            </li>
            <li>
              <div>
                负责整个项目的&nbsp;
                <code>src/utils</code>&nbsp;目录下所有工具的封装。例如常用的&nbsp;AJAX&nbsp;库&nbsp;
                <code>axios</code>， 项目中使用的全局进度条&nbsp;
                <code>nprogress</code>&nbsp;，加载&nbsp;
                <code>loading</code>&nbsp;等。 封装工具细粒度良好，上手使用方便，并能为所封装的工具书写相应使用文档，文档具有较高可读性。
              </div>
            </li>
            <li>
              <div>
                该系统前后共上线两个版本，负责整个项目&nbsp;
                <code>UI</code>&nbsp;界面样式的两次重构，使用到了&nbsp;
                <code>element-ui</code>&nbsp;框架。界面具有良好的交互性，能够引导用户进行操作，并对用户的行为进行友好的提示。
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <div>
          <span style="color:#007bff">个人总结</span>： 经过对整个项目一些常用工具的封装以及基本配置，对整个项目更加熟悉，出现问题能迅速定位解决。能够对自己所负责模块进行多次角度测试来模拟用户行为，做到上线零事故。
        </div>
      </li>
    </ul>
 -->

<!-- 技能清单 -->
    <!-- <h3 class="font-weight-normal skills">技能</h3>
      <p class="text-primary font-weight-light skills-en">Personal&nbsp;Skills</p>
      <div class="bar"></div>
    <dl>
        <dt>HTML&nbsp;5&nbsp;-&nbsp;&star;&star;&star;&star;&star;</dt>
        <dd>根据 HTML5 标准编写具有语义化的文档结构，包括&nbsp;&lt;nav&gt;、&lt;header&gt;、&lt;main&gt;、&lt;section&gt;、&lt;article&gt;、&lt;aside&gt;、&lt;footer&gt;&nbsp;等</dd>
        <dt>CSS&nbsp;布局与居中&nbsp;-&nbsp;&star;&star;&star;&star;&star;</dt>
        <dd>了解&nbsp;flex&nbsp;布局以及水平、垂直居中常用方法，并写了相应博客</dd>
        <dt>响应式页面&nbsp;-&nbsp;&star;&star;&star;&star;&star;</dt>
        <dd>PC&nbsp;端根据&nbsp;&lt;meta&nbsp;name="viewport"&gt;&nbsp;以及媒体查询 (media&nbsp;query)，移动端根据动态&nbsp;REM、vw/vh&nbsp;等书写响应式页面，100%&nbsp;还原设计稿</dd>
        <dt>Bootstrap&nbsp;-&nbsp;&star;&star;&star;&star;&star;</dt>
        <dd>能够使用&nbsp;Bootstrap&nbsp;制作精美布局，使&nbsp;PC&nbsp;端、移动端界面表现一致</dd>
        <dt>原生&nbsp;JavaScript&nbsp;-&nbsp;&star;&star;&star;&star;</dt>
        <dd>在不使用框架的情况下，能够使用原生&nbsp;JS&nbsp;常用&nbsp;API&nbsp;完成部分需求</dd>
        <dt>DOM&nbsp;事件模型&nbsp;-&nbsp;&star;&star;&star;&star;</dt>
        <dd>了解&nbsp;DOM&nbsp;事件模型，捕获、冒泡以及如何阻止事件的传递</dd>
        <dt>this、闭包、原型链、作用域&nbsp;-&nbsp;&star;&star;&star;&star;&star;</dt>
        <dd>了解&nbsp;this、闭包、原型链、作用域的基本概念，并能够熟练使用，写了相应博客</dd>
        <dt>立即执行函数、AJAX、promise&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解立即执行函数、AJAX、promise&nbsp;的概念以及实现</dd>
        <dt>ECMAScript&nbsp;2015&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解&nbsp;ES6&nbsp;的部分新特性，并能够在实际项目中使用</dd>
        <dt>jQuery&nbsp;-&nbsp;&star;&star;&star;&star;</dt>
        <dd>能够使用&nbsp;jQuery&nbsp;制作网站、进行&nbsp;DOM&nbsp;操作，事件代理、轮播、动画等</dd>
        <dt>MVC、Observer&nbsp;设计模式&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解&nbsp;MVC、Observer&nbsp;软件设计模式理念，并能够应用到实际项目中</dd>
        <dt>Vue.js&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>能够使用&nbsp;Vue.js&nbsp;完成需求，了解&nbsp;Vue.js&nbsp;的数据双向绑定、数据响应式原理、父子组件间的通信原理，能够使用&nbsp;Vue-Router&nbsp;制作前端路由</dd>
        <dt>HTTP&nbsp;-&nbsp;&star;&star;&star;&star;</dt>
        <dd>了解&nbsp;HTTP&nbsp;基础知识，了解常见状态码含义，能够根据请求查看响应</dd>
        <dt>命令行&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解命令行，能够使用命令行进行常用的操作</dd>
        <dt>Git&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解&nbsp;git&nbsp;版本控制工具以及常用的操作</dd>
        <dt>前端工程化&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解&nbsp;webpack、parcel&nbsp;等前端打包工具，能够进行基础的使用</dd>
        <dt>Node.js&nbsp;-&nbsp;&star;&star;</dt>
        <dd>了解&nbsp;Node.js&nbsp;一些知识，能够使用&nbsp;Node.js&nbsp;搭建小服务器，根据请求的&nbsp;URL&nbsp;返回指定的数据</dd>
        <dt>HTTP&nbsp;缓存、Cookie、Session&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解客户端缓存、Cookie、session&nbsp;等知识，并写了相应博客</dd>
        <dt>LocalStorage、Cache-Control、Etag、Expires&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解&nbsp;LocalStorage、Cache-Control、Etag、Expires&nbsp;等知识，了解几者之间的区别，并写了相应博客</dd>
        <dt>同源策略、跨域&nbsp;-&nbsp;&star;&star;&star;</dt>
        <dd>了解同源策略，以及常用的跨域方法</dd>
      </dl>
 -->
    
    
  </main>

<!--   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script> -->
</body>

</html>
